<script lang="ts" setup>
import { navigate } from '@/utils/navigate';
import Tools from '@/utils/tools';

interface IState {
  initRegionalData: { name: string; list: IProvinceCityDistrict[] }[];
  regionalData: { name: string; list: IProvinceCityDistrict[] }[];
  indexList: string[];
  recentHot: Array<IProvinceCityDistrict>;
}
const state = reactive<IState>({
  regionalData: [],
  initRegionalData: [],
  indexList: ['最近热门'],
  recentHot: [
    { provinceName: '湖南省', provinceId: 43, cityName: '长沙市', cityId: 4301, areaName: '', areaId: undefined },
    { provinceName: '上海市', provinceId: 31, cityName: '上海市', cityId: 3101, areaName: '', areaId: undefined },
    { provinceName: '北京市', provinceId: 11, cityName: '北京市', cityId: 1101, areaName: '', areaId: undefined },
    { provinceName: '重庆市', provinceId: 50, cityName: '重庆市', cityId: 5001, areaName: '', areaId: undefined },
    { provinceName: '广东省', provinceId: 44, cityName: '深圳市', cityId: 4403, areaName: '', areaId: undefined },
  ],
});

onLoad((options) => {
  if (!options) return;
  state.regionalData = Object.keys(JSON.parse(decodeURIComponent(options.data))).map((key) => {
    return { name: key, list: JSON.parse(decodeURIComponent(options.data))[key] };
  });
  state.initRegionalData = Tools.deepClone(state.regionalData);
  state.indexList = state.indexList.concat(state.regionalData.map((item) => item.name));
});

// 地区搜索筛选
const handleRegionaSearchFilter = (value: string) => {
  if (!value) {
    state.regionalData = Tools.deepClone(state.initRegionalData);
    return;
  }
  state.regionalData = state.regionalData
    .map((item) => {
      const matchedSubItem = item.list.find((subItem) => {
        const target = subItem.areaName || subItem.cityName;
        return target.includes(value);
      });
      if (matchedSubItem) {
        return { name: item.name, list: [matchedSubItem] };
      } else {
        return null;
      }
    })
    .filter((item) => item !== null);
};

// 地区点击携带数据返回上个界面
const handleRegionalClick = (data: { provinceName: string; cityName: string; areaName: string }) => {
  const pages = getCurrentPages();
  const previousPage = pages[pages.length - 2];
  if (previousPage && typeof previousPage.$vm.fetchObtainNewsList === 'function') {
    previousPage.$vm.fetchObtainNewsList(1, data);
  }

  navigate({ url: '', type: 'navigateBack' });
};
</script>
<template>
  <view class="c-bg c-pd pt-0 w-screen pos-fixed top-0 left-0 z-99"><van-search shape="round" placeholder="搜索城市/区县" @search="handleRegionaSearchFilter($event.detail)" @clear="handleRegionaSearchFilter('')" /></view>
  <view class="w-screen mt-44px" style="height: calc(100vh - 44px)">
    <van-index-bar :indexList="state.indexList" highlight-color="#ffc300" sticky-offset-top="44">
      <view>
        <van-index-anchor index="最近热门" />
        <van-cell :title="item.areaName || item.cityName" v-for="(item, index) in state.recentHot" :key="index" @click="handleRegionalClick(item)" />
      </view>
      <view v-for="key in state.regionalData" :key="key.name">
        <van-index-anchor :index="key.name" />
        <van-cell :title="item.areaName || item.cityName" v-for="(item, index) in key.list" :key="index" @click="handleRegionalClick(item)" />
      </view>
    </van-index-bar>
  </view>
</template>
<style scoped lang="scss">
:deep(.van-search) {
  padding: 0 !important;
  background: transparent !important;
}
</style>
